<template>
  <div id="main">
    <el-card class="calendar">
      <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->

        <template slot="dateCell" slot-scope="{ date, data }">
          <p
            :class="data.isSelected ? 'is-selected' : ''"
            :style="
              date.toString().slice(0, 3) === 'Sat' ||
              date.toString().slice(0, 3) === 'Sun'
                ? 'color:red '
                : ''
            "
            @dblclick="allcalendar(data.day)"
          >
            {{
              data.day
                .split('-')
                .slice(2)
                .join('-')
            }}
            <!-- {{ date.toString().slice(0, 3) === 'Sat' || date.toString().slice(0, 3) === 'Sun' }} -->
            <!-- {{data.day.toString().slice(8,10)}}  -->
            {{ data.isSelected ? '✔️' : '' }}
          </p>
        </template>
      </el-calendar>
    </el-card>
    <todo />
    <el-dialog
      title="备忘录添加"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- <span>这是一段信息</span> -->
      <el-form>
        <el-form-item label="">
          <el-input class="input" type="textarea" v-model="remarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRemarks()">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import todo from './other/index.vue'
export default {
  components: { todo },
  data() {
    return {
      dialogVisible: false,
      remarks: ''
    }
  },
  methods: {
    allcalendar(value) {
      console.log(value)
      this.dialogVisible = true
    },
    addRemarks() {
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
// .el-calendar-table .el-calendar-day {
//   text-align: center;
//   line-height: 73px;
//   width: auto;
//   height: 73px;
// }
#main {
  display: flex;
  justify-content: space-around;
  .calendar {
    height: 100%;
    width: 70%;
  }
}
.input {
  font-size: 20px;
}

.is-selected {
  color: #1989fa;
}
</style>
